<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
        <!-- 使用插槽 -->
      <slot> </slot>
    </div>
    <!-- 一般用于pc端才用点击左右切换 -->
    <!-- <div class="swiper-button-prev" @click="prev"></div>
    <div class="swiper-button-next" @click="next"></div> -->
  </div>
</template>

<script>
import Swiper from "swiper";
//需要单独再次引用一次swiper下的样式（可以去model中swiper文件中查看）
import "swiper/swiper-bundle.min.css";

export default {
  data() {
    return {
    // 把mySwiper设为全局对象，此处只能返回对象
        mySwiper:null,
    };
  },
  mounted() {
    //vue的dom操作方法，$nextTick,当虚拟dom渲染完毕声称真实dom的方法
    //目前这些图片还是在一个屏幕上一个，要求是一个屏幕四个，需要网格
    this.$nextTick(() => {
      this.mySwiper = new Swiper(".swiper-container", {
        loop: true,
        autoplay: true,
        //一次性多个
        slidesPerView: 4,

        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });
    });
  },

// methods:{
//     //swiper文档中有相关的方法
//     //切换效果是动画，因此需要在声明周期中删除这个动画
//     prev(){
//         this.mySwiper.slidePrev()
//     },
//     next(){
//         this.mySwiper.slideNext()
//     }
// },
beforeDestroy(){
//切换是有动画效果的，关闭上述的动画，否则下次打开的话因为之前没有销毁，会来回跳
  this.mySwiper=null

}

};
</script>

<style lang="scss" scoped>
.swiper-container {
  width: 100%;
  height: 200px;
  background: chocolate;
}
</style>>
